<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>个人页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/userProfiles.css">
    <link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
    <script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.js"></script>

    <script>
        $(function () {
            //拿到当前的用户id
            var user = JSON.parse(sessionStorage.getItem("user"));
            console.log(user);

            //拿到请求上的id
            var params = getParams();
            console.log(params.id);
            //如果没有id就直接结束方法
            if (!params.id) {
                return;
            }
            //查询出当前用户与该用户之间的关系
            if(user.id == params.id){
                //首先判断当前用户的id是否与当前查询的id
                //如果是,则隐藏当前的私信按钮以及关注按钮
               $("#letterBtn").hide();
               $("#followBtn").hide();
            }else{

                $.get("/follows/getRelation",{fanId:user.id,followId:params.id},function (follow) {
                    //判断当前页面用户的id与当前用户的id的关系状态
                    //如果当前用户(主动方)与当前页面用户(被动方)的状态为2时,就将关注按钮的边为取消关注按钮
                    console.log(follow);
                    if(follow){
                        $("#followBtn").html("取消关注");
                    }else{
                        $("#followBtn").html("关注");
                    }
                    //关注与取消关注
                    if($("#followBtn").html() == "关注"){
                        //当其为关注时,点击事件发送的是增加请求
                        $("#followBtn").click(function () {
                            $.ajax({
                                url:"/follows/save",
                                type:"PUT",
                                data:{fanId:user.id,followId:params.id},
                                success:function (data) {
                                    if(data.success){
                                        window.location.reload();
                                    }else{
                                        alert(data.msg)
                                    }
                                }
                            })
                        })
                    }else{
                        $("#followBtn").click(function () {
                            $.ajax({
                                url:"/follows/"+user.id+"/"+params.id,
                                type:"DELETE",
                                success:function (data) {
                                    if(data.success){
                                        window.location.reload();
                                    }else{
                                        alert(data.msg)
                                    }
                                }
                            })
                        })
                    }
                })
            }



            //拿到当前user的对象
            $.get("/users/" + params.id, function (user) {
                $.each(user,function (item, ele) {

                })
                //将数据渲染到页面上
                $(".container").renderValues(user);
            })


            //当前页的input框
            var currentPage = $("#currentPage");
            //游记总页数
            var pages = 1;
            //用于存储游记列表的数据
            var travelData = [];

            //分页查询的方法
            function query(url,item) {
                //当前页的值
                var currentPageValue = currentPage.val();
                //每页显示数量
                var pageSize = $("#pageSize").val();

                //获取所有游记的分页数据
                $.get(url, {currentPage: currentPageValue, pageSize: pageSize}, function (data) {
                    //往数组容器中存数据(把第二个数组的内容合并到第一个数组中)
                    $.merge(travelData, data.list);
                    //渲染数据
                    $(item).renderValues({list: travelData});
                    //设置当前页加1(确保获取到第二页的数据再+1)
                    currentPage.val(parseInt(currentPageValue) + 1);
                    //设置总页数的值
                    pages = data.pages;
                    //跳转游记页面
                    $("a[data-url]").click(function () {
                        var url = $(this).data("url");
                        var id = $(this).data("tid");
                        window.location.href = url + id;
                    })

                })
            }


            //默认查询第一页
            currentPage.val(1);
            query("/users/" + params.id + "/travels","#travels");
            //滚动事件
            $(window).scroll(function () {
                //document(html)卷上去的高度+窗口的高度>=document(html)的整个高度
                if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                    //当前页的值
                    var currentPageValue = currentPage.val();
                    //判断currentPageValue当前页是否大于pages总页数
                    if (currentPageValue <= pages) {
                        query("/users/" + params.id + "/travels","#travels");

                    } else {
                        //提示用户已经到底了
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经到底了!',
                            autoClose: 1000
                        });
                    }
                }
            })


            //查询出当前用户的游记信息
            $.get("/users/" + params.id + "/travels", function (data) {
                //渲染到tabs中
                $("#travels-tab").renderValues(data);
            })

            //给点评绑定一个查询事件
            /*$("#comments-tab").click(function () {
                travelData = [];
                currentPage.val(1);
                query("/strategycomments/" + params.id,"#comments");
                console.log(currentPage.val());
                //滚动事件
                $(window).scroll(function () {
                    //document(html)卷上去的高度+窗口的高度>=document(html)的整个高度
                    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                        //当前页的值
                        var currentPageValue = currentPage.val();
                        console.log(currentPageValue);
                        //判断currentPageValue当前页是否大于pages总页数
                        if (currentPageValue <= pages) {
                            query("/strategycomments/" + params.id,"#comments");

                        } else {
                            //提示用户已经到底了
                            $(document).dialog({
                                type: 'notice',
                                infoText: '已经到底了!',
                                autoClose: 1000
                            });
                        }
                    }
                })
            })*/

            //查询事件
            $.get("/strategycomments/" + params.id,function (comments) {
                console.log(comments);
                //渲染数据
                $("#comments").renderValues(comments);
                //点评数量
                $("#comments-tab").renderValues(comments);
                //跳转页面
                $("a[data-scurl]").click(function () {
                    var url = $(this).data("scurl");
                    var id = $(this).data("scid");
                    window.location.href = url + id;
                })



                //拼接图片
                $.each(comments.list,function (index,ele) {
                    var imgs = []
                    imgs = ele.imgUrls.split(";");
                    var commentImg = $($(".comment-img")[index]);
                    var imgss = "";
                    $.each(imgs,function (index1,ele1) {
                        if(ele1 != ""){
                            imgss += "<li><img src='"+ele1+"'/></li>"
                        }
                    })
                    commentImg.html(imgss);
                })

                //拼接星星
                $.each(comments.list,function (index,ele) {
                    var stars = "";
                    var commentStar = $($(".comment-star")[index]);
                    for (var i = 1;i <= ele.starNum;i++){
                        stars += "<i class='fa fa-star'></i>";
                    }
                    console.log();
                    for(var a=1;a<=5 - parseInt(ele.starNum);a++){
                        stars += "<i class='fa fa-star-o'></i>";
                    }
                    commentStar.html(stars);
                })
            })

        })

    </script>
</head>
<body>
<div class="container bg" style="background-image: url(&quot;/img/user/bg.jpeg&quot;);">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <img class="rounded-circle" width="17%" render-src="headImgUrl">
            <p class="name" render-html="nickName"></p>
            <p render-html="sign"></p>

            <div class="row num">
                <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                    <div>
                        <span>1</span>
                    </div>
                    <div>
                        <span id="isattention">关注</span>
                    </div>
                </div>
                <div class="col-2">
                    <div>
                        <span>0</span>
                    </div>
                    <div>
                        <span>粉丝</span>
                    </div>
                </div>
                <div class="col">
                    <button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
                    <button class="btn btn-success ibtn" id="followBtn"></button>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" name="currentPage" id="currentPage" value="1">
<input type="hidden" name="pageSize" id="pageSize" value="2">

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <!--这里的href指定的是一个锚点:当点击该链接时,就会自动跳到指定id的标签上,#travels指的就是指定travels id的页面-->
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
                TA的游记[<span render-html="size"></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
                TA的点评[<span render-html="size"></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
                TA的旅行单[<span>0</span>]
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">

            <dl class="list" render-loop="list">
                <dd>
                    <a href="javascript:;" data-url="travelContent.html?id=" render-attr="data-tid=list.id">
                        <img render-src="list.coverUrl">
                    </a>
                    <p>
                        <span class="title" render-html="list.title"></span>
                        <span class="span-right"><span render-html="list.likeNum"></span>
                                <a href="javascript:;" id="like">
                                    <i class="fa fa-thumbs-o-up"></i>
                                </a>
                        </span>
                    </p>
                    <hr>
                </dd>
            </dl>
        </div>

        <div class="comment tab-pane fade " id="comments">
            <input type="hidden" name="currentPage" value="1">
            <input type="hidden" name="pageSize" value="5">
            <input type="hidden" name="rows" value="1">
            <div render-loop="list">
                <div class="row" id="strategycomment">
                    <div class="col-2 comment-head">
                        <a href="">
                            <img class="rounded-circle" render-src="list.user.headImgUrl">
                        </a>
                    </div>
                    <div class="col">
                        <span class="comment-star">

                        </span>

                        <span class="comment-date" render-html="list.createTime"></span>
                        <div class="comment-content">
                            <a href="javascript:;" data-scurl="strategyComment.html?id=" render-attr="data-scid=list.id">
                                <p render-html="list.content"></p>
                            </a>
                        </div>
                        <ul class="comment-img">
                        </ul>

                        <div class="comment-link">
                            <a href="javascript:;" data-scurl="strategyCatalogs.html?strategyId=" render-attr="data-scid=list.strategy.id">
                                <img render-src="list.strategy.coverUrl"> <span render-html="list.strategy.title"></span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="tab-pane fade" id="pills-contact">.3333..</div>
    </div>
</div>
</body>
</html>